<link rel="stylesheet" href="./css/qfui.css">

<div id="root">
    <!-- 导航 -->
   <qf-nav-bar title="千峰UI组件库"></qf-nav-bar>

   <!-- loading1  -->
   <button @click="status1 = !status1">显示loading1</button>
   <qf-loading1 v-show="status1"></qf-loading1>
   <br>
   <br>
   <br>
   <hr>

   <!-- loading2 -->
   <button @click="status2 = true">显示loading2</button>
   <qf-loading2 v-show="status2" @close="status2 = false"></qf-loading2>
   <br>
   <br>
   <br>
   <hr>
   <!-- qfDialog -->
   <button @click="status3=true">显示对话框dialog</button>
  <qf-dialog v-show="status3" @close="status3=false"></qf-dialog>
  <br>
  <br>
  <br>
  <hr>
  <qf-page :total="50" :pagesize="5" @change-page="changePageFn"></qf-page>
  <br>
  <br>
  <br>
  <hr>

  <!-- button -->
  <qf-button content="创建"></qf-button>
  <qf-button content="返回"></qf-button>
  <qf-button content="提交"></qf-button>
</div>
<script src="http://unpkg.zhimg.com/vue@2"></script>
<script src="./js/qfui.js"></script>
<script>
const vm = new Vue({
    el: "#root",
    data: {
        status1:false,
        status2:false,
        status3:false,
    },
    methods:{
        changePageFn(pagenum){
            console.log(pagenum);
        }
    }
})
</script>